<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:b="http://bootsfaces.net/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>BootsFaces: next-gen JSF Framework</title>
        <meta name="author" content="Riccardo Massera"></meta>
    </h:head>
    <h:body style="padding-top: 60px">
        <ui:composition template="/applayout/pageTemplate.xhtml">
            <ui:define name="content">
                <style>
                    .show-grid [class^="col-"] {
                        background-color: rgba(86, 61, 124, 0.15);
                        border: 1px solid rgba(86, 61, 124, 0.2);
                        padding-bottom: 10px;
                        padding-top: 10px;
                        //margin-bottom: 15px;
                    }
                    .row {
                        margin-bottom: 20px;
                    }
                </style>
                <h1>BootsFaces grid examples</h1>
                <p>Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
                <h3>Three equal columns</h3>
                <p>
                Get three equal-width columns<strong>starting at desktops and scaling to large desktops</strong> 
                using <code>col-md=*</code> or <code>span=*</code> attributes. 
                On mobile devices, tablets and below, the columns will automatically stack.
                </p>
                <b:row styleClass="show-grid">
                    <b:column span="4"><h:outputText value="span=4 or col-md=4"/></b:column>
                    <b:column span="4"><h:outputText value="span=4 or col-md=4"/></b:column>
                    <b:column span="4"><h:outputText value="span=4 or col-md=4"/></b:column>
                </b:row>
                <h3>Three unequal columns</h3>
                <p>
                Get three columns
                <strong>starting at desktops and scaling to large desktops</strong> of various widths. 
                Remember, grid columns should add up to twelve for a single horizontal block. 
                More than that, and columns start stacking no matter the viewport.
                </p>
                <b:row styleClass="show-grid">
                    <b:column span="3"><h:outputText value="span=3 or col-md=3"/></b:column>
                    <b:column span="6"><h:outputText value="span=6 or col-md=6"/></b:column>
                    <b:column span="3"><h:outputText value="span=3 or col-md=3"/></b:column>
                </b:row>
                <h3>Two columns</h3>
                <p>
                Get two columns <strong>starting at desktops and scaling to large desktops</strong>.
                </p>
                <b:row styleClass="show-grid">
                    <b:column span="8"><h:outputText value="span=8 or col-md=8"/></b:column>
                    <b:column span="4"><h:outputText value="span=4 or col-md=4"/></b:column>
                </b:row>
                <h3>Full width, single column</h3>
                <p class="text-warning">No grid classes are necessary for full-width elements.</p>
                <hr/>
                <h3>Two columns with two nested columns</h3>
                <p>
                Per the documentation, nesting is easy—just put a row of columns within an existing row. This gives you two columns
                <strong>starting at desktops and scaling to large desktops</strong>, with another two (equal widths) within the larger column.
                </p>
                <p>At mobile device sizes, tablets and down, these columns and their nested columns will stack.</p>
                <b:row styleClass="show-grid">
                    <b:column span="8"><h:outputText value="span=8 or col-md=8"/>
                        <b:row styleClass="show-grid">
                        <b:column span="6"><h:outputText value="span=6 or col-md=6"/></b:column>
                        <b:column span="6"><h:outputText value="span=6 or col-md=6"/></b:column>
                        </b:row>
                    </b:column>
                    <b:column span="4"><h:outputText value="span=4 or col-md=4"/></b:column>
                </b:row>
                <hr/>
                <h3>Mixed: mobile and desktop</h3>
                <p>The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
                <p>Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.</p>
                <!-- Stack the columns on mobile by making one full-width and the other half-width -->
                <b:row styleClass="show-grid">
                    <b:column col-xs="12" col-md="8"><h:outputText value="col-xs=12 col-md=8"/></b:column>
                    <b:column col-xs="6" col-md="4"><h:outputText value="col-xs=6 col-md=4"/></b:column>
                </b:row>
                <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
                <b:row styleClass="show-grid">
                    <b:column col-xs="6" col-md="4"><h:outputText value="col-xs=6 col-md=4"/></b:column>
                    <b:column col-xs="6" col-md="4"><h:outputText value="col-xs=6 col-md=4"/></b:column>
                    <b:column col-xs="6" col-md="4"><h:outputText value="col-xs=6 col-md=4"/></b:column>
                </b:row>
                <!-- Columns are always 50% wide, on mobile and desktop -->
                <b:row styleClass="show-grid">
                    <b:column col-xs="6"><h:outputText value="col-xs=6"/></b:column>
                    <b:column col-xs="6"><h:outputText value="col-xs=6"/></b:column>
                </b:row>
                <hr/>
                <h3>Mixed: mobile, tablet, and desktop</h3>
                <p></p>
                <b:row styleClass="show-grid">
                    <b:column col-xs="12" col-sm="6" col-md="8"><h:outputText value="col-xs=12 col-sm=6 col-md=8"/></b:column>
                    <b:column col-xs="6" col-sm="6" col-md="4"><h:outputText value="col-xs=6 col-sm=6 col-md=4"/></b:column>
                </b:row>
                <b:row styleClass="show-grid">
                    <b:column col-xs="6" col-sm="4" col-md="4"><h:outputText value="col-xs=6 col-sm=4 col-md=4"/></b:column>
                    <b:column col-xs="6" col-sm="4" col-md="4"><h:outputText value="col-xs=6 col-sm=4 col-md=4"/></b:column>
                    <!-- Optional: clear the XS cols if their content doesn't match in height -->
                    <div class="clearfix visible-xs"></div>
                    <b:column col-xs="6" col-sm="4" col-md="4"><h:outputText value="col-xs=6 col-sm=4 col-md=4"/></b:column>
                </b:row>
                <hr/>
                <h3>Column clearing</h3>
                <p>Clear floats at specific breakpoints to prevent awkward wrapping with uneven content.</p>
                <b:row styleClass="show-grid">
                    <b:column col-xs="6" col-sm="3"><h:outputText value="col-xs=6 col-sm=3"/></b:column>
                    <b:column col-xs="6" col-sm="3"><h:outputText value="col-xs=6 col-sm=3"/></b:column>
                    <div class="clearfix visible-xs"></div>
                    <b:column col-xs="6" col-sm="3"><h:outputText value="col-xs=6 col-sm=3"/></b:column>
                    <b:column col-xs="6" col-sm="3"><h:outputText value="col-xs=6 col-sm=3"/></b:column>
                </b:row>
                <hr/>
                <h3>Offset, push, and pull resets</h3>
                <p>Reset offsets, pushes, and pulls at specific breakpoints.</p>
                <b:row styleClass="show-grid">
                    <b:column col-sm="5" col-md="6"><h:outputText value="col-sm=5 col-md=6"/></b:column>
                    <b:column col-sm="5" offset-sm="2" col-md="6" offset="0"><h:outputText value="col-sm=5 offset-sm=2 col-md=6 offset=0"/></b:column>
                </b:row>
                <b:row styleClass="show-grid">
                    <b:column col-sm="6" col-md="5" col-lg="6"><h:outputText value="col-sm=6 col-md=5 col-lg=6"/></b:column>
                    <b:column col-sm="6" col-md="5" offset="2" col-lg="6" offset-lg="0"><h:outputText value="col-sm=6 col-md=5 offset=2 col-lg=6 offset-lg=0"/></b:column>
                </b:row>
                

                <br/><br/><br/>
            </ui:define>
        </ui:composition>
    </h:body>
</html>
